@import "common";
@import "mixins/button";

//
// Buttons
// --------------------------------------------------

// Base styles
// --------------------------------------------------
.@{ns}btn {
  .btn;
}

// Circle Button
.@{ns}btn-icon-circle {
  border-radius: 50% !important;
  width: @padding-base-vertical*2 + @line-height-computed;
}

// Button Loading state
.@{ns}btn-loading {
  color: transparent !important;
  position: relative;
  cursor: default;
  pointer-events: none;

  > .@{ns}btn-spin {
    &::before,
    &::after {
      content: "";
      position: absolute;
      width: @btn-loading-spin-default-diameter;
      height: @btn-loading-spin-default-diameter;
      margin: auto;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      border-radius: 50%;

      .@{ns}btn-xs& {
        width: @btn-loading-spin-xs-diameter;
        height: @btn-loading-spin-xs-diameter;
      }
    }

    &::before {
      border: @btn-loading-spin-ring-wide solid @btn-loading-spin-ring-color;

      .@{ns}btn-primary& {
        opacity: .3;
      }
    }

    &::after {
      border-width: @btn-loading-spin-ring-wide;
      border-color: @btn-spin-light-color transparent transparent;
      border-style: solid;
      animation: buttonSpin .6s infinite linear;

      .@{ns}btn-default&,
      .@{ns}btn-link&,
      .@{ns}btn-subtle&,
      .@{ns}btn-ghost& {
        border-top-color: @btn-spin-light-invert-color;
      }
    }
  }
}

// Alternate buttons
// --------------------------------------------------

// Default Button
// Rewrite common button style
.@{ns}btn-default {
  .button-ripple;
  .btn-icon-with-text(@btn-icon-with-text-bg);

  color: @btn-default-color;
  background: @btn-default-bg;

  .btn-loading-reset(@btn-default-color, @btn-default-bg);

  &,
  & > .@{ns}icon {
    .btn-transition();
  }

  &:focus,
  &.focus {
    color: @btn-default-color;
    background-color: @btn-default-focus-bg;

    .btn-icon-with-text(@btn-icon-with-text-focus-bg);
  }

  &:hover {
    color: @btn-default-hover-color;
    background-color: @btn-default-hover-bg;

    .btn-icon-with-text(@btn-icon-with-text-hover-bg);
  }

  &:active,
  &.@{ns}btn-active,
  .@{ns}open > .@{ns}dropdown-toggle& {
    color: @btn-default-color;
    background-color: @btn-default-active-bg;
    background-image: none;

    .btn-icon-with-text(@btn-icon-with-text-active-bg);

    &:hover,
    &:focus,
    &.focus {
      color: @btn-default-color;
      background-color: @btn-default-active-bg;

      .btn-icon-with-text(@btn-icon-with-text-active-bg);
    }
  }

  &.@{ns}btn-disabled,
  &[disabled],
  .@{ns}dropdown-disabled & {
    &,
    &:hover,
    &:focus,
    &:active,
    &:active:focus {
      // Reset Opacity;
      opacity: 1;
      color: @B400;
      background-color: @B050;
    }
  }

  .generate-spectrum-primary-btns();
}

// Primary Button
.@{ns}btn-primary {
  .button-ripple;
  .button-primary-variant(@btn-primary-color; @btn-primary-bg);

  .btn-loading-reset(@btn-primary-color; @btn-primary-bg);

  &,
  & > .@{ns}icon {
    .btn-transition();
  }

  .generate-spectrum-primary-btns();
}

// Link buttons
.@{ns}btn-link {
  .btn-transition(color);
  .btn-link-variant(@btn-link-color);
  .btn-loading-reset(@btn-link-color);

  .generate-spectrum-link-btns();
}

// Subtle Button
.@{ns}btn-subtle {
  .btn-subtle;
}

// Ghost Button
.@{ns}btn-ghost {
  .btn-transition(color-and-border);
  .btn-ghost-variant(@btn-ghost-color, @btn-ghost-border-color);

  .generate-spectrum-ghost-btns();
}

// Icon Button
// Icon Button text size increase 2 px
.@{ns}btn-icon:not(.@{ns}btn-icon-with-text) {
  .icon {
    font-size: @font-size-large;
    line-height: @line-height-large;
  }

  &.btn-xs {
    font-size: @font-size-base;
    line-height: @line-height-base;
  }
}

// Button Sizes
// --------------------------------------------------

.@{ns}btn-lg {
  .btn-lg;
}

.@{ns}btn-sm {
  .btn-sm;
}

.@{ns}btn-xs {
  .btn-xs;
}

// Block button
// --------------------------------------------------

.@{ns}btn-block {
  display: block;
  width: 100%;
}

// Vertically space out multiple block buttons
.@{ns}btn-block + .@{ns}btn-block {
  margin-top: 5px;
}

// Specificity overrides
input[type="submit"],
input[type="reset"],
input[type="button"] {
  &.@{ns}btn-block {
    width: 100%;
  }
}
